/* 图片预览组件，用于图片预览 */
<template>
  <el-dialog custom-class="image-priview-dialog" :visible.sync="isShowImageDialog" @closed="clearImg">
    <!-- <el-carousel indicator-position="outside" height="600px">
    <el-carousel-item v-for="(src,index) in imgs" :key="index">-->
    <div v-loading="loading" v-for="(src,index) in imgs" :key="index" style="height:600px">
      <!-- <img :src="src" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;" /> -->
      <!-- :style="`width:${realWidth};height:${realHeight};`" -->
      <!-- {{ 'urllr=' + src }} -->
      <el-image
        :src="src"
        fit="cover"
        style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"
        :preview-src-list="[src]"
        @load="loadImage"
        @error="loadError"
      >
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </div>

    <!-- </el-carousel-item>
    </el-carousel>-->
  </el-dialog>
</template>
 
<script>
export default {
  name: "ImgPreview",
  data() {
    return {
      imgs: "",
      isShowImageDialog: false,
      loading: false
    };
  },
  mounted() {
    // /dev-api/obs/download?id=1645362300832641025
    // console.log('imgs=', process.env.VUE_APP_BASE_API);
  },
  activated() {
    // console.log('imgs=', process.env.VUE_APP_BASE_API);
  },
  methods: {
    clearImg() {
      this.imgs = null;
      this.loading = false;
    },

    /**
     * 图片加载完成
     * @param {*} e 
     */
    loadImage(e) {
      this.loading = false;
    },

    /**
     * 图片加载失败
     * @param {*} e 
     */
    loadError(e) {
      this.loading = false;
    }
  }
};
</script>
 
<style lang="scss">
.image-priview-dialog {
  .el-dialog__header {
    border-bottom: none !important;
  }
}
</style>